<template>
  <!-- 优惠券组 -->
  <view class="diy-coupon" v-if="dataList.length"
        :style="'background: ' + itemStyle.background + '; padding: ' + itemStyle.paddingTop + 'px 0;'">
    <scroll-view :scroll-x="true">
      <view class="coupon-wrapper" v-for="(dataItem, index) in dataList" :key="index">
        <view :class="'coupon-item color__' + (dataItem.state.value ? dataItem.color.text : 'gray')">
          <i class="before" :style="'background: ' + itemStyle.background + ';'"></i>
          <view class="left-content dis-flex flex-dir-column flex-x-center flex-y-center">
            <view class="content-top">
              <block v-if="dataItem.coupon_type.value == 10">
                <text class="f-30">￥</text>
                <text class="price">{{ dataItem.reduce_price }}</text>
              </block>
              <text class="price" v-if="dataItem.coupon_type.value == 20">{{ dataItem.discount }}折</text>
            </view>
            <view class="content-bottom">
              <text class="f-22">满{{ dataItem.min_price }}元可用</text>
            </view>
          </view>
          <view
              class="right-receive dis-flex flex-x-center flex-y-center"
              @tap.stop.prevent="receiveTap"
              :data-index="index"
              :data-state="dataItem.state.value"
              :data-coupon-id="dataItem.coupon_id"
          >
            <view v-if="dataItem.state.value" class="dis-flex flex-dir-column">
              <text>立即</text>
              <text>领取</text>
            </view>
            <view v-else class="state">
              <text>{{ dataItem.state.text }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import coupon_api from "../../common/coupon_api";

export default {
  data() {
    return {
      dataItem: {
        state: {
          value: false,
          text: ''
        },

        color: {
          text: ''
        },

        coupon_type: {
          value: 0
        },

        reduce_price: '',
        discount: '',
        min_price: '',
        coupon_id: ''
      }
    };
  },
  options: {},
  /**
   * 组件的属性列表
   * 用于组件自定义设置
   */
  props: {
    itemStyle: Object,
    dataList: Array || Object
  },
  methods: {
    /**
     * 领取优惠券
     */
    receiveTap: function (e) {
      let that = this;
      let dataset = e.currentTarget.dataset;
      if (!dataset.state) {
        return false;
      }
      coupon_api.add({
        coupon_id: dataset.couponId
      }).then(res => {
        console.log(res);
        if (res.code === 401) {
          that.gotoPath('/pages/login/index', false);
          return;
        }
        that.$u.toast(res.msg);
        if (res.code === 0) {
          that.setData({
            ['dataList[' + dataset.index + '].state']: {
              value: 0,
              text: '已领取'
            }
          });
        }

      })
    }
  },
  created: function () {
  }
};
</script>
<style>
@import './c_coupon.css';
</style>
